// 当表单发生提交行为的时候
$("#userForm").on("submit",function(){
	// 获取到用户在表单中输入的内容并将内容格式化成参数字符串
    var formData=$(this).serialize();
    // console.log(formData);
	// 向服务器端发送添加用户的请求
    $.ajax({
        type:"post",
        url:"/users",
        data:formData,
        success:function(){
			// 刷新页面
            location.reload();
        },
        error:function(){
			alert('用户添加失败')
        }
    })
    return false;
	// 阻止表单的默认提交行为
})
// 当用户选择文件的时候
$("#modifyBox").on("change","#avatar",function(){
    // console.log(this.files[0])
    var formData=new FormData();
    formData.append("avatar",this.files[0]);
    $.ajax({
        type:"post",
        url:"/upload",
        data:formData,
		// 告诉$.ajax方法不要解析请求参数
        processData:false,
		// 告诉$.ajax方法不要设置请求参数的类型,在formData已经设置了
        contentType:false,
        success:function(response){
            // console.log(response);
			// 实现头像预览功能
            $("#preview").attr("src",response[0].avatar);
            $("#hiddenAvatar").val(response[0].avatar);
        }
    })
})
// 向服务器端发送请求 索要用户列表数据 一上来就发送请求
$.ajax({
    type:"get",
    url:"/users",
    success:function(response){
        // console.log(response);
        var html=template("userTpl",{data:response});
        // console.log(html);
		// 将拼接好的字符串显示在页面中
        $("#userBox").html(html);
    }
})
// 通过事件委托的方式为编辑按钮添加点击事件
$("#userBox").on("click",".edit",function(){
	// 获取被点击用户的id值
    var id=$(this).attr("data-id");
	// 根据id获取用户的详细信息
    $.ajax({
        type:"get",
        url:"/users/"+id,
        success:function(response){
            // console.log(response);
            var html =template("modifyTpl",response);
            // console.log(html);
            $("#modifyBox").html(html);
        }
    })
})
// 为修改表单添加表单提交事件
$("#modifyBox").on("submit","#modifyForm",function(){
	// 获取用户在表单中输入的内容
    var formData=$(this).serialize();
    // console.log(formData);
    // 获取要修改的那个用户的id值
    var id=$(this).attr("data-id");
	// 发送请求 修改用户信息
    $.ajax({
        type:"put",
        url:"/users/"+id,
        data:formData,
        success:function(response){
            // console.log(response);
            // 修改用户信息成功 重新加载页面
            location.reload();
        }
    })
    // 阻止表单默认提交
    return false;
})
// 当删除按钮被点击的时候
$("#userBox").on("click",".delete",function(){
	// 如果管理员确认要删除用户
    if(confirm("您真的要删除用户吗")){
		// 获取到即将要删除的用户id
        var id=$(this).attr("data-id");
		// 向服务器端端发送请求 删除用户
        $.ajax({
            type:"delete",
            url:"/users/"+id,
            success:function(){
                location.reload();
            }
        })
    }
})

// 获取全选按钮
var selectAll=$("#selectAll");
// 获取批量删除按钮
var deleteMany=$("#deleteMany")
// 当全选按钮的状态发生改变时
selectAll.on("change",function(){
	// 获取到全选按钮当前的状态  不能用attr
    var status=$(this).prop("checked");
    // console.log(status);
    if(status){
		// 显示批量删除按钮
        deleteMany.show();
    }else{
		// 隐藏批量删除按钮
        deleteMany.hide();
    }
	// 获取到所有的用户并将用户的状态和全选按钮保持一致
    $("#userBox").find("input").prop("checked",status);
})
$("#userBox").on("change",".userStatus",function(){
    // 获取到所有用户 在所有用户中过滤出选中的用户
	// 判断选中用户的数量和所有用户的数量是否一致
	// 如果一致 就说明所有的用户都是选中的checked
    // 否则 就是有用户没有被选中
    var inputs=$("#userBox").find("input");
    // console.log(inputs)
    // if(inputs.length==inputs.filter(item=>inputs[item].checked).length){
    if(inputs.length==inputs.filter(":checked").length){
        selectAll.prop("checked",true);
    }else{
        selectAll.prop("checked",false);
    }
	// 如果选中的复选框的数量大于0 就说明有选中的复选框
    if(inputs.filter(item=>inputs[item].checked).length>0){
        deleteMany.show();
    }else{
        deleteMany.hide();
    }
})
// 为批量删除按钮添加点击事件
deleteMany.on("click",function(){
    var ids=[];
	// 获取选中的用户
    var checkedUser=$("#userBox").find("input").filter(":checked");
	// 循环复选框 从复选框元素的身上获取data-id属性的值
    checkedUser.each(function(index,element){
        ids.push($(element).attr("data-id"));
    })
    // console.log(ids);
    if(confirm("您真要确定要进行批量删除操作吗")){
        $.ajax({
            type:"delete",
            url:"/users/"+ids.join("-"),
            success:function(response){
                location.reload();
            }
        })
    }
})